import '../scss/index.scss';

import Header from "../components/header/index";
import Nav from '../components/nav/index';
import NewsItem from '../components/news_item/index';
import PageLoading from '../components/page_loading/index';
import BottomTip from '../components/bottom_tip/index';
import ErrorTip from '../components/error_tip/index';

import { IndexModel } from "../models/index";

import data from '../utils/data'
import tools from '../utils/tools';

const header = new Header(),
  nav = new Nav(),
  newsItem = new NewsItem(),
  pageLoading = new PageLoading(),
  bottomTip = new BottomTip(),
  errorTip = new ErrorTip();

const indexModel = new IndexModel();

const App = ($, win) => {

  const $app = $('#app'),
    $window = $(win),
    $list = $app.children('.list'),
    newScrollToBottom = tools.scrollToBottom.bind(null, scrollToBottom)

  let field = 'top',
    pageNum = 0,
    pageCount = 0,
    showCount = 10,
    dataCache = {},//数据缓存池
    bottomnLock = false;


  const init = () => {
    render(field, pageNum, showCount).then(bindEvent);
  }

  const render = (field, pageNum, showCount) => {
    // 要在render完成后绑定事件
    return new Promise((resolve, reject) => {
      _renderHeader();
      _renderNav(data.news_type);
      _renderList(field, pageNum, showCount)
      resolve();
    })

  }

  const bindEvent = () => {
    // 事件代理到.item
    $('.nav .nav-wrapper').on('click', '.item', navSelect);

    $list.on('click','.news-item',toDetailPage)
  }

  const _renderHeader = () => {
    $app.append(header.tpl({
      title: '新闻头条',
      showLeftIcon: true,
      showRightIcon: true
    }));
  }

  const _renderNav = (newsType) => {
    const tpls = nav.tpl(newsType);
    $app.append(tpls.navStr);
    $('.nav .nav-wrapper').append(tpls.itemsStr)
  }

  const _renderList = (field, pageNum, showCount) => {
    if (dataCache[field]) {
      pageCount = dataCache[field].length;
      _insertList('cover');
    } else {
      _handlePageLoading('append');
      indexModel.getNewsList(field, showCount).then((res) => {
        if (res == 404) {
          _handleErrorTip('append', '没有找到网络');
          _handlePageLoading('remove');
          return;
        }
        dataCache[field] = res;
        pageCount = dataCache[field].length;

        setTimeout(() => {
          _insertList('cover');
        }, 1000);

      });;
    }
  }

  const _insertList = (method) => {
    switch (method) {
      case 'cover':
        $list.html(newsItem.tpl(dataCache[field][pageNum], pageNum));
        _scrollToTop(150);
        _handlePageLoading('remove');
        _afterRender(true);
        break;
      case 'append':
        $list.append(newsItem.tpl(dataCache[field][pageNum], pageNum));
        _afterRender(false);

    }

    bottomnLock = false;
    _handleBottomTip('remove')
  }

  const _afterRender = (bindScroll) => {
    bindScroll && _handleScrollEvent(true)
    tools.thumbShow($('.news-thumb'));
  }

  const _handlePageLoading = (how) => {
    switch (how) {
      case 'append':
        $list.html('');
        $app.append(pageLoading.tpl());
        break;
      case 'remove':
        $('.loading-icon').remove();
        break;
      default:
        break;
    }
  }

  const _handleBottomTip = (how, isLoading, text) => {
    switch (how) {
      case 'append':
        $app.append(bottomTip.tpl(isLoading, text));
        break;
      case 'remove':
        $('.bottom-tip').remove();
        break;
      case 'removeAndAppend':
        $('.bottom-tip').remove();
        $app.append(bottomTip.tpl(isLoading, text));
        break;
      default:
        break;
    }
  }

  const _handleErrorTip = (how, text) => {
    switch (how) {
      case 'append':
        $app.append(errorTip.tpl(text));
        break;
      case 'remove':
        $('.error-tip').remove();
        break;
      default:
        break;
    }
  }

  const _scrollToTop = (delay) => {
    setTimeout(() => {
      win.scrollTo(0, 0)
    }, delay);
  }

  const _handleScrollEvent = (isBind) => {
    isBind ? $window.on('scroll', newScrollToBottom)
      : $window.off('scroll', newScrollToBottom);;

  }

  function navSelect() {
    pageNum = 0;
    _handleBottomTip('remove');
    _handleBottomTip('remove');
    _handleScrollEvent(false);
    _scrollToTop(150);

    const $this = $(this);
    field = $this.attr('data-type');

    $this.addClass('current').siblings('.item').removeClass('current')

    _handlePageLoading('append')
    _renderList(field, pageNum, showCount);
  }

  function scrollToBottom() {
    if (pageNum < pageCount - 1) {
      if (!bottomnLock) {
        bottomnLock = true;
        _handleBottomTip('append', 'loading', '正在努力加载中');

        setTimeout(() => {
          pageNum++;
          _insertList('append')
        }, 1000);
      }
    } else {
      _handleBottomTip('removeAndAppend', '', '已加载完所有内容')
    }
  }

  function toDetailPage() {
    const $this = $(this),
          url = $this.attr('data-url'),
          idx = $this.attr('data-index'),
          pageNum = $this.attr('data-page');
    console.log(dataCache[field][pageNum][idx]);
    localStorage.setItem('target', JSON.stringify(dataCache[field][pageNum][idx]))
    window.location.href = `detail.html?news_url=${url}&uniquekey=${dataCache[field][pageNum][idx].uniquekey}`
  }

  init();

}

App(Zepto, window)
